import type { FormSchemaGetter, VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { z } from '#/adapter/form';
import { formatToYuan } from '#/utils/common';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'projectName',
    label: '项目名称',
  },
];

export const columns: VxeGridProps['columns'] = [
  {
    title: '项目名称',
    field: 'projectName',
    width: 150,
  },
  {
    title: '项目价格',
    field: 'projectPrice',
    width: 120,
    formatter: ({ cellValue }) => {
      return formatToYuan(cellValue);
    },
  },
  {
    field: 'projectImg',
    title: '项目图片',
    slots: { default: 'projectImg' },
    minWidth: 80,
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    resizable: false,
    width: 'auto',
  },
];

export function modalSchema(
  handleUpload: (file: File) => void,
  handleRemove: () => void,
): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      dependencies: {
        show: () => false,
        triggerFields: [''],
      },
      fieldName: 'id',
      label: '项目ID',
    },
    {
      component: 'Upload',
      componentProps: {
        // 更多属性见：https://ant.design/components/upload-cn
        accept: '.png,.jpg,.jpeg',
        // 自动携带认证信息
        // customRequest: uploadApi,
        disabled: false,
        maxCount: 1,
        multiple: false,
        showUploadList: true,
        // 上传列表的内建样式，支持四种基本样式 text, picture, picture-card 和 picture-circle
        listType: 'picture-card',
        beforeUpload: (file: File) => {
          handleUpload(file);
          return false;
        },
        onRemove: (_file: File) => {
          handleRemove();
        },
      },
      fieldName: 'projectImg',
      label: '项目图片',
      renderComponentContent: () => {
        return {
          default: () => '上传图片',
        };
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'projectName',
      label: '项目名称',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      fieldName: 'projectPrice',
      label: '项目价格',
      componentProps: {
        min: 0,
        precision: 2,
        placeholder: '请输入项目价格',
      },
      rules: z.number().min(0, { message: '项目价格不能小于0' }),
    },
  ];
}
